<template>
<div class="list" ref="wrapper">
    <div>
        <div class="area">
            <div class="title border-topbottom">当前城市</div>
            <div class="button-list">
                <div class="button-wrapper">
                    <div class="button">{{this.$store.state.city}}</div>
                </div>
            </div>
        </div>
        <div class="area">
            <div class="title border-topbottom">热门城市</div>
            <div class="button-list">
                <div class="button-wrapper"
                     v-for="item of hot" 
                     :key="item.id"
                     @click="cityChange(item.name)">
                    <div class="button">{{item.name}}</div>
                </div>
                
            </div>
        </div>
        <div class="area" 
             v-for="(item,key) of all" 
             :key="key"
             :ref="key">
            <div class="title border-topbottom">{{key}}</div>
            <div class="item-list" 
                 v-for="innerItem of item" 
                 :key="innerItem.id"
                 @click="cityChange(innerItem.name)">
                <div class='item border-bottom' >
                    {{innerItem.name}}
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script> 
import Bscroll from 'better-scroll'
export default {
    name:"ListCity",
    props:{
          hot:Array,
          all:Object,
          letter:String
    },
    methods:{
        cityChange(city){
            this.$store.commit('cityChange',city)
            this.$router.push('/')
        }
    },
    mounted(){
            this.scroll=new Bscroll(this.$refs.wrapper)
   },
    watch:{
     letter(){
         if (this.letter) {
        const element = this.$refs[this.letter][0];
        this.scroll.scrollToElement(element)
         }
   }
    }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.border-topbottom
 &:before
   border-color:#ccc
 &:after
   border-color:#ccc
.border-bottom
 &:before
   border-color:#ccc
.list
 overflow:hidden
 position:absolute
 top:1.58rem
 left:0
 right:0
 bottom:0
 .title 
  background:#eee
  line-height:.54rem
  padding-left:.2rem
  color:#666
  font-size:.26rem
 .button-list
  overflow:hidden
  padding:.1rem .6rem .1rem .1rem
  .button-wrapper
   float:left
   width:33.33%
   .button
    margin:.1rem
    padding:.1rem 0
    text-align:center
    border:.02rem solid #ccc
    border-radius:.06rem
 .item-list
  .item
   line-height:.76rem
   padding-left:.2rem
</style>